<!-- 权限-->
<template>
    <div style="margin-top: 25px;" v-if="u_typeIs2"> 
        <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm" :inline="true" size="mini" label-width="120px">
            <el-tabs type="border-card">
                <el-tab-pane label="房源">
                    <div>
                        <el-form-item v-for="(domain, indexs) in roomopts.zu" :key="indexs" :label="domain.name" :prop="domain.nm_drop_down_name">
                            <el-select v-model="form[domain.nm_drop_down_name]" placeholder="请选择">
                                <el-option v-for="(item,oindex) in domain.pid" :key="oindex" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <span v-for="(domains,index) in roomopts.dan" :key="index">
                            <el-form-item v-for="(item, index) in domains.pid" :key="index" :prop="item.select_name">
                                <el-checkbox v-model="form[item.select_name]" size="medium" :true-label="item.id" false-label="">{{item.name}}</el-checkbox>
                            </el-form-item>
                        </span>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="客源">
                    <div>
                        <el-form-item v-for="(domain, indexs) in customeropts.zu" :key="indexs" :label="domain.name" :prop="domain.nm_drop_down_name">
                            <el-select v-model="form[domain.nm_drop_down_name]" placeholder="请选择">
                                <el-option v-for="(item,oindex) in domain.pid" :key="oindex" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <span v-for="(domains,index) in customeropts.dan" :key="index">
                            <el-form-item v-for="(item, index) in domains.pid" :key="index" :prop="item.select_name">
                                <el-checkbox v-model="form[item.select_name]" size="medium" :true-label="item.id" false-label="">{{item.name}}</el-checkbox>
                            </el-form-item>
                        </span>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="其他">
                    <div>
                        <el-form-item v-for="(domain, indexs) in otheropts.zu" :key="indexs" :label="domain.name" :prop="domain.nm_drop_down_name">
                            <el-select v-model="form[domain.nm_drop_down_name]" placeholder="请选择">
                                <el-option v-for="(item,oindex) in domain.pid" :key="oindex" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <span v-for="(domains,index) in otheropts.dan" :key="index">
                            <el-form-item v-for="(item, index) in domains.pid" :key="index" :prop="item.select_name">
                                <el-checkbox v-model="form[item.select_name]" size="medium" :true-label="item.id" false-label="">{{item.name}}</el-checkbox>
                            </el-form-item>
                        </span>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <div style="text-align: center;">
            <el-button type="primary" @click="submit('form')" size="mini" style="margin:20px 0px 15px;">保 存</el-button>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        padding-right: 5px;
    }
    .el-select-dropdown__item{
        font-size: 12px;
        padding: 0px 10px;
        height: 26px;
        line-height: 26px;
    }
    .el-input,.el-date-editor.el-input{
        width: 145px;
    }
    .el-checkbox__label{
        width: 106px;
        font-size: 13px;
    }
</style>
<script>
    import conf from '../../../../config/userconf.js'
    export default {
        name: "Permission",
        props: {  
            authories: {   //默认权限
                type: String,
                required: true,
            },
            permissionId: {
                required: true,
            },
            typeid: {
                type: String,
                required: true,
            },
        },
        data() {
            return {
                roomopts:[],
                customeropts:[],
                otheropts:[],
                form: {}, 
                rules: {},
                d_authories: '',
                u_typeIs2:window.localStorage.getItem('u_type')==2?true:false
            }
        },
        methods: {
            // 数据回调
            dataCallback(state,res, index){
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res);
                        if(index == 1){
                            this.roomopts = res.data.data;
                        }else if(index == 2){
                            this.customeropts = res.data.data;
                        }else if(index == 3){
                            this.otheropts = res.data.data;
                        }


                        //循环   动态构造表单内部字段
                        for (var i = 0; i < res.data.data.zu.length; i++) {  

                            var nm_drop_down_name = res.data.data.zu[i].nm_drop_down_name;
                            //https://cn.vuejs.org/v2/guide/list.html
                            //Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
                            // this.form[nm_drop_down_name] = "";
                            this.$set(this.form , nm_drop_down_name , '');

                        }
                        for (var i = 0; i < res.data.data.dan.length; i++) {  
                            for (var j = 0; j < res.data.data.dan[i].pid.length; j++) {
                                var select_name = res.data.data.dan[i].pid[j].select_name;
                                // this.form[select_name] = "";
                                this.$set(this.form , select_name , '');
                            }
                        }

                        //  默认赋值
                        if(this.authories){
                            var arr = this.authories.split(",");
                            // console.log(arr);
                            //i<arr.length-1     后台返回  1|25|134,2|26|135,     是以","结尾
                            for(var i = 0; i< arr.length-1; i++){
                                var sonarr = arr[i].split("|");
                                //  类型  |  模块id  |  权限id        (类型：1为zu下拉框，2为dan单选框 ；)
                                if(sonarr[0] == 1){

                                    for(var j = 0; j<res.data.data.zu.length; j++){

                                        var nm_drop_down_name = res.data.data.zu[j].nm_drop_down_name;
                                        if(sonarr[1] == res.data.data.zu[j].id){
                                            this.form[nm_drop_down_name] = parseInt(sonarr[2]);
                                        }
                                    }
                                }else if(sonarr[0] == 2){

                                    for (var j = 0; j < res.data.data.dan.length; j++) {

                                        for (var k = 0; k < res.data.data.dan[j].pid.length; k++) {

                                            var select_name = res.data.data.dan[j].pid[k].select_name;

                                            if(sonarr[1] == res.data.data.dan[j].id){
                                                if(sonarr[2] == res.data.data.dan[j].pid[k].id){
                                                    this.form[select_name] = parseInt(sonarr[2]);
                                                }
                                                
                                            }
                                            
                                        }
                                    }
                                }
                            }
                        }

                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.roomopts = [];
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                },
            /* 权限内容渲染*/
            permissionopt (index,data=Object()){

                data.nm_permissions_type = index;
                var cache = window.sessionStorage.getItem("PERMISSION_SESSION_DB"+index);
                if(cache){
                    var cache_data = JSON.parse(cache);
                    this.dataCallback(cache_data.state,cache_data.res, index);
                }else{
                    conf.permission.permission(data,(state,res)=>{
                        if(state == 'success'&&res.data.code == 0){
                            window.sessionStorage.setItem("PERMISSION_SESSION_DB"+index, JSON.stringify({"state":state,"res":res}))
                        }
                        this.dataCallback(state,res, index);
                    })
                }
               
            },
            //拼接权限字符串
            pinstr(type,arr){
                //权限
                if(type == 1){
                    for(var i=0 ; i<arr.length ; i++){
                        var nm_drop_down_name = arr[i].nm_drop_down_name;
                        if(this.form[nm_drop_down_name]){
                            this.d_authories += this.form[nm_drop_down_name] + ',';
                        }
                    }
                }else if(type == 2){
                    for(var i=0 ; i<arr.length ; i++){
                        for(var j=0 ; j<arr[i].pid.length ; j++){
                            var select_name = arr[i].pid[j].select_name;
                            if(this.form[select_name]){
                                this.d_authories += this.form[select_name] + ',';
                            }
                        }
                        
                    }
                }
                
                // console.log(this.d_authories);
            },
            //提交
            submit (formName,data=Object(),pdata=Object()) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //提交
                        // console.log(this.form);
                        
                        this.pinstr(1,this.roomopts.zu);   //1为组，2为单
                        this.pinstr(2,this.roomopts.dan);   //1为组，2为单
                        this.pinstr(1,this.customeropts.zu);   //1为组，2为单
                        this.pinstr(2,this.customeropts.dan);   //1为组，2为单
                        this.pinstr(1,this.otheropts.zu);   //1为组，2为单
                        this.pinstr(2,this.otheropts.dan);   //1为组，2为单
                        // console.log(this.d_authories);

                        // 判断是修改部门权限还是员工权限
                        if(this.typeid == 1){  //部门

                            data.id = this.permissionId;  //id
                            data.d_authories = this.d_authories;  //权限

                            conf.department.editpermission(data,(state,res)=>{
                                if (state == 'success'&&res.data.code == 0){
                                    this.$message({
                                        type: 'success',
                                        message: res.data.data
                                    });
                                    //修改权限成功，应刷新权限数据
                                    this.$emit('refreshlistevent','');

                                    this.$confirm('是否将权限同步到该部门员工?', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'warning'
                                    }).then(() => {
                                        //同步员工
                                        pdata.id = this.permissionId;  //id
                                        conf.department.editdepartmentdownuserpermission(pdata,(state,res)=>{
                                            if (state == 'success'&&res.data.code == 0){
                                                
                                            }else if(state == 'success'&&res.data.code != 0){
                                                if(res.data.code == 401){
                                                    this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                                                }else{
                                                    this.$message({
                                                        type: 'info',
                                                        message: res.data.msg
                                                    });
                                                }
                                            }
                                        });
                                    }).catch(() => {
                                        this.$message({
                                            type: 'info',
                                            message: '已取消同步'
                                        });          
                                    });

                                }else if(state == 'success'&&res.data.code != 0){
                                    if(res.data.code == 401){
                                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                                    }else{
                                        this.$message({
                                            type: 'info',
                                            message: res.data.msg
                                        });
                                    }
                                }
                            })
                        }else if(this.typeid == 2){  //员工
                            data.u_id = this.permissionId;  //id
                            data.authories = this.d_authories;  //权限

                            conf.employee.edituserpermission(data,(state,res)=>{
                                if (state == 'success'&&res.data.code == 0){
                                    //修改权限成功，应刷新权限数据
                                    this.$emit('refreshlistevent','');
                                    
                                    this.$message({
                                        type: 'success',
                                        message: res.data.data
                                    });
                                    
                                }else if(state == 'success'&&res.data.code != 0){
                                    if(res.data.code == 401){
                                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                                    }else{
                                        this.$message({
                                            type: 'info',
                                            message: res.data.msg
                                        });
                                    }
                                }
                            })
                        }else if(this.typeid == 3 || this.typeid == 4){  //添加、修改职务
                            data.authories = this.d_authories;  //权限
                            //将所选权限传回父组件
                            this.$emit('refreshlistevent',this.d_authories,this.typeid);
                        }

                        
 
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        mounted (){
            this.$nextTick(function(){
                if(this.u_typeIs2){
                    this.permissionopt(1);   //房源  下拉数据
                    this.permissionopt(2);   //客源  下拉数据
                    this.permissionopt(3);   //其他  下拉数据
                }
            })
        },
        
    }
</script>